<template>
  <div>
    <h1>人员名单及爱好列表</h1>
    <ul>
      <!-- props传值的时候 批量展开传递 -->
      <Item
        v-for="p in person"
        :key="p.id"
        v-bind="p"
        :deletePersonById="deletePersonById"
      />
    </ul>
  </div>
</template>

<script>
import Item from "./components/Item";
export default {
  name: "App",
  components: {
    Item,
  },
  data() {
    return {
      person: [
        { id: 1, name: "老余", hobby: ["吃", "喝", "Piao"] },
        { id: 2, name: "陈伟", hobby: ["唱", "跳", "Rap"] },
        { id: 3, name: "老李", hobby: ["打球", "看书", "写字"] },
      ],
    };
  },

  methods: {
    /* 
      props做子传父:
        * props自己封装一个函数，并把函数通过props的形式传递给子组件
        * 子组件接受这个函数,并调用传参
        * 父组件的函数就被执行,并且接受到了参数,完成子传父
      
      总结:
        props传值:父传子
        props传函数:子传父
    
    */
    deletePersonById(id) {
      // console.log(id);
      //删除数组中值的方法2种
      //1.splice:需要知道被删除元素的下标，并且每次只能删除一个
      //2.filter:删除一个或多个数组的元素，得到结果直接替换之前的数组
      this.person = this.person.filter((item) => {
        return item.id !== id;
      });
    },
  },
};
</script>

<style></style>
